<script setup lang="ts">
import HomeHeader from '@/components/HomeHeader/index.vue'
import HomeMenu from '@/components/HomeMenu/index.vue'
import { useRoute } from 'vue-router'
import { watch, ref, onMounted } from 'vue'
import { useUserStore } from '@/stores'
const userStore = useUserStore()
const $route = useRoute()
const name = ref<string>($route.fullPath as string)

onMounted(() => {
  name.value = $route.fullPath as string
  getUserInfoData()
})

const getUserInfoData = async () => {
  userStore.getUserInfo()
}

watch(
  () => $route.fullPath,
  (newVal: string) => {
    name.value = newVal as string
  }
)
</script>
<template>
  <!-- 引入页头菜单 -->
  <HomeHeader></HomeHeader>
  <div class="container">
    <!-- 左侧垂直菜单 -->
    <HomeMenu :name="name"></HomeMenu>
    <router-view></router-view>
  </div>
</template>

<style scoped lang="less">
.container {
  display: flex;
  background-color: rgb(250, 251, 252);
}
</style>
